<template>
  <footer class="travel-footer bg-dark text-white pt-5 pb-4 animate__animated animate__fadeInUp">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase mb-4 animate__animated animate__fadeIn" data-aos="fade-up">
            <i class="bi bi-airplane-engines me-2"></i>
            TravelExplorer
          </h5>
          <p class="animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="100">
            专业的旅游资讯平台，为您提供全球最新、最全面的旅游信息和攻略，
            助您规划完美旅程。
          </p>
          <div class="d-flex animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="200">
            <a href="#" class="text-white me-3 social-icon"><i class="bi bi-facebook fs-4"></i></a>
            <a href="#" class="text-white me-3 social-icon"><i class="bi bi-twitter fs-4"></i></a>
            <a href="#" class="text-white me-3 social-icon"><i class="bi bi-instagram fs-4"></i></a>
            <a href="#" class="text-white me-3 social-icon"><i class="bi bi-youtube fs-4"></i></a>
          </div>
        </div>
        
        <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase mb-4 animate__animated animate__fadeIn" data-aos="fade-up">快速链接</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><NuxtLink to="/" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="100">首页</NuxtLink></li>
            <li class="mb-2"><NuxtLink to="/destinations" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="200">目的地</NuxtLink></li>
            <li class="mb-2"><NuxtLink to="/tours" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="300">旅游线路</NuxtLink></li>
            <li class="mb-2"><NuxtLink to="/blog" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="400">旅游攻略</NuxtLink></li>
            <li class="mb-2"><NuxtLink to="/about" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="500">关于我们</NuxtLink></li>
          </ul>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase mb-4 animate__animated animate__fadeIn" data-aos="fade-up">热门目的地</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a href="#" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="100">巴黎</a></li>
            <li class="mb-2"><a href="#" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="200">东京</a></li>
            <li class="mb-2"><a href="#" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="300">纽约</a></li>
            <li class="mb-2"><a href="#" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="400">巴厘岛</a></li>
            <li class="mb-2"><a href="#" class="text-white footer-link animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="500">马尔代夫</a></li>
          </ul>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase mb-4 animate__animated animate__fadeIn" data-aos="fade-up">联系我们</h5>
          <ul class="list-unstyled">
            <li class="mb-2 animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="100"><i class="bi bi-geo-alt me-2"></i> 北京市朝阳区旅游大厦</li>
            <li class="mb-2 animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="200"><i class="bi bi-telephone me-2"></i> +86 10 1234 5678</li>
            <li class="mb-2 animate__animated animate__fadeIn" data-aos="fade-up" data-aos-delay="300"><i class="bi bi-envelope me-2"></i> info@travelexplorer.com</li>
          </ul>
        </div>
      </div>
      
      <hr class="my-4" />
      
      <div class="row align-items-center">
        <div class="col-md-6 text-center text-md-start">
          <p class="mb-0">&copy; 2024 TravelExplorer. 版权所有.</p>
        </div>
        <div class="col-md-6 text-center text-md-end">
          <ul class="list-inline mb-0">
            <li class="list-inline-item"><a href="#" class="text-white footer-link">隐私政策</a></li>
            <li class="list-inline-item"><a href="#" class="text-white footer-link">服务条款</a></li>
            <li class="list-inline-item"><a href="#" class="text-white footer-link">网站地图</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import AOS from 'aos'

onMounted(() => {
  AOS.init({
    duration: 800,
    once: true
  })
})
</script>

<style scoped>
.travel-footer {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
  position: relative;
  overflow: hidden;
}

.travel-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="70" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/></svg>') repeat;
  animation: stars 30s linear infinite;
}

@keyframes stars {
  from { transform: translateY(0); }
  to { transform: translateY(-100px); }
}

.footer-link {
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
}

.footer-link:hover {
  color: #ffc107 !important;
  padding-left: 5px;
}

.footer-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background-color: #ffc107;
  transition: width 0.3s ease;
}

.footer-link:hover::before {
  width: 100%;
}

.social-icon {
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
  background-color: #ffc107;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

hr {
  border-color: rgba(255, 255, 255, 0.2);
}
</style>